<template>
	<view :style="bodyStyle">
		<video  id="myVideo"
				:autoplay="true"
				play-strategy="1"
				codec="software"
				:enable-play-gesture = "true"
				:http-cache="true"
				:style="videoStyle" 
				:src="videoUrl"
				:poster="posterUrl"
				controls 
		></video>

	</view>
</template>
<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app"
import { reactive, ref } from 'vue'
import { urlCodeToText } from "@/utils/strUtil"

const videoContext = ref()
const videoUrl = ref()
const posterUrl = ref()

const windowInfo = uni.getWindowInfo()
const safeAreaInsetsBottom = windowInfo.safeAreaInsets.bottom 
const statusBarHeight = windowInfo.statusBarHeight
const screenHeight = windowInfo.screenHeight
const screenWidth = windowInfo.screenWidth
// 标题高度
let h1 = 30
// #ifdef H5
h1 = 120
// #endif
// 内容高度
const videoHeight = screenHeight - statusBarHeight - safeAreaInsetsBottom -h1

const bodyStyle = reactive<any>({
	height: screenHeight + 'px',
	width: screenWidth + 'px',
	backgroundColor: 'black'
})

// 视频区样式
const videoStyle = reactive<any>({
	height: videoHeight + 'px',
	width: screenWidth + 'px',
	position: 'fixed',
	top:  statusBarHeight + "px",
	left: "0px",
})


onLoad((option:any)=>{
   videoUrl.value = urlCodeToText(option.videoUrl)
   posterUrl.value = urlCodeToText(option.posterUrl)
   videoContext.value = uni.createVideoContext('myVideo')
})
</script>